<template>
  <div>
      <!-- 头部 -->
    <div class="w-header">
      <div class="w-xhead">
        <span>注册</span>
      </div>
    </div>
    <div class="w">
    <!-- main -->
      <div class="w-main">
        <h3>我们将发送验证码到您填写的手机号上，请注意查收</h3>
        <div class="winput">
          <div class="winput1">
            <i></i>
            <input type="text" placeholder="请输入手机号" @input="wphone(phone)" v-model="phone">
          </div>
           <div class="winput2">
            <i></i>
            <input type="text" placeholder="请输入手机验证码">
            <a href="###" :class="{'wbian1':msg,'wbian2':!msg}" @click="wyan(phone)">获取验证码</a>
          </div>
          <div class="winput3">
            <i></i>
            <input type="text" placeholder="请输入邀请码" v-model="yaoma">
          </div>
          <div class="wbtn">
            <a href="###" @click="gotolink()">取消</a>
            <!-- <a href="###" @click="zhu()">完成注册</a> -->
            <a href="###" :plain="true" @click="open">完成注册</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  
</template>

<script>
import axios from 'axios';
export default {
  name:'Register',
  data(){
    return {
      msg:true,
      phone:'',
      yaoma:'',
      aa:''
    }
  },
  methods:{
      open() {
            var obj={
            phone:this.phone,
            pwd:this.yaoma
          }
          axios.post('/api/small/user/v1/register',obj).then(res=>{
            let msg=res.data.message;
            this.aa=msg;
            if(msg=='注册成功'){
              this.$message({
                message: '注册成功',
                type: 'success'
              });
              this.$router.replace('/login1');

            }else{
                this.$message.error(this.aa);
            }
          });
      },
     gotolink(){
        //点击跳转至上次页面
        //this.$router.go(-1)
        //指定跳转地址
        this.$router.replace('/');
    },
    wphone(){
      this.msg=false;
    },
    wyan(p){
      if(p.length!=11){
        alert('请输入正确的电话号码');
      }else{
        console.log(p);
         var reg=/^1[3456789]\d{9}$/;
        if(!(reg.test(p))){ 
          alert("手机号码有误，请重填");  
          return false; 
        }else{
          console.log('手机号码格式正确');
        }
      }
    },
  }
}
</script>

<style scoped>

/* main */
.winput{
  height: 6rem;
  width: calc(100% - 8rem);
  margin: 0 4rem;
  border-radius: 6rem;

}
.winput>div{
   width: 100%;
  height: 5.8rem;
  position: relative;
  margin-top: 2rem;
}
.winput1 i,.winput3 i,.winput2 i{
position: absolute;
top: 50%;
left: 3.6rem;
transform: translateY(-1.5rem);
height: 3rem;
width: 4.2rem;
border-right: 0.1rem solid #ccc;
}
.winput1 i{
background: url(../../assets/user/user-name.png) no-repeat 0 0;

}
.winput2 i{
background: url(../../assets/user/user-code.png) no-repeat 0 0;
z-index: 1;
}
.winput3 i{
background: url(../../assets/user/user-yao.png) no-repeat 0 0;

}
.winput1 input,.winput3 input{
  width:calc(100% - 9rem);
  height: 100%;
  border: 0.1rem solid #ccc;
  border-radius: 6rem;
  background-color: #fff;
  font-size: 2.4rem;
  padding-left: 9rem;
}
.winput2 input{
  position: absolute;
  left: 0;
  width:calc(100% - 31rem);
  height: 100%;
  border: 0.1rem solid #ccc;
  border-radius: 6rem;
  background-color: #fff;
  font-size: 2.4rem;
  padding-left: 9rem;
  /* z-index: -1; */
  /* margin-right: 2rem; */
}
.winput2 a{
text-decoration: none;
display: inline-block;
height: 5.8rem;
line-height: 5.8rem;
text-align: center;
width: 20rem;
border-radius: 6rem;
position: absolute;
right: 0;
top: 0;
background-color: #fff;
font-size: 2.4rem;

}
.wbian1{
border: 0.1rem solid #ccc;
color: #808080;
}
.wbian2{
  color: #4c4c4c;
  border:0.1rem solid #4c4c4c;
}
/* 取消完成 */
.wbtn{
  display: flex;
  justify-content: space-between;
  height: 6rem;
  line-height: 6rem;
  text-align: center;
}
.wbtn a{
  display: block;
  height: 5.8rem;
  font-size: 2.4rem;
  width: 24rem;
  border-radius: 5.8rem;
}
.wbtn a:nth-child(1){
  color: #4c4c4c;
  border: 0.1rem solid #4d4d4d;
  background-color: #fff;
  
}
.wbtn a:nth-child(2){
  color: #ffffff;
  border: 0.1rem solid #e53e42;
  background-color: #e53e42;
}
/* 头部 */
.w-header{
  background-color: #e53e42;
  width: 100%;
  height: 9.6rem;
  color: #fff;
  font-size: 3.6rem;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
}
.w-xhead{
  height:9.6rem;
  width:calc(100% - 4rem) ;
  padding: 0 2rem;
  line-height: 9.6rem;
  position: relative;
}
/* 头部 */
.w{
  width: calc(100% - 4rem);
  padding: 0 2rem;
}
/* main */
.w-main h3{
  margin-top: 15.4rem;
  font-size: 1.8rem;
  color: #808080;
  /* text-align: center; */
  line-height: 6.4rem;
  font-weight: normal;
}
</style>